<template>
    <div>
        <div class="tab" style="display: flex;justify-content: space-around;margin-top: 30px">
            <div class="" style="display: flex;align-items: center;justify-content: center;">
                <div>手机号</div>
            <div class="tabSearch" style="display: flex;">
                <el-input style="margin: 0 10px ;" v-model="phoneNumber" placeholder="请输入手机号"></el-input>
            </div>
            <el-button type="primary" @click="searchFor">确定</el-button>
            </div>
        </div>


        <el-table :data="tableData" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="StreamName" label="流名称" align="center">
            </el-table-column>
            <el-table-column prop="AppName" label="应用名称" align="center">
            </el-table-column>
            <el-table-column prop="StreamStartTime" label="直播开始时间" align="center">
            </el-table-column>
            <el-table-column prop="StreamEndTime" label="直播结束时间" align="center">
            </el-table-column>
            <el-table-column prop="StopReason" label="断流原因" align="center">
            </el-table-column>
            <el-table-column prop="max_user" label="最多用户数量" align="center">
            </el-table-column>
            <el-table-column prop="average_time" label="平局浏览时长" align="center">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import axios from "axios";
import {userList,historyLive } from '../../../libs/api'
export default {
    data() {
        return {
            issue:'',
            fourteen: [],
            tableData: [],
            issueData:[],
            iseditor:false,
            tabIndex:'',
            hq_name:'',
            matchID:'',
            phoneNumber:'',
            currentPage: 1,
            PageSize: 10,
        }
    },
    mounted() {
        
    },
    methods: {
        searchFor(){
            this.getUserList()
        },
        getUserList() {
            userList({
                page: this.currentPage,
                limit: this.PageSize,
                mobile:this.phoneNumber
            }).then(res => {
                console.log(res)
                let arr = res.data.list
                historyLive({
                    user_id:arr[0].id
            }).then(res => {
                console.log(res)
                this.tableData = res.data.data
            })
            })
        },
    }
}
</script>

<style>
.item1 {
    background-color: #3C9CFF;
    color: #fff;
}

.box {
    display: flex;

}

.fourteenClass {
    width: 300px;
}

.fourteenClass_a {
    width: 80px;
    border: 1px solid #aaa;
    text-align: center;
    line-height: 38px;
}

.fourteenClass_a:nth-child(2) {
    border-left: none;
    border-right: none;
}
</style>